<template>
	<view class="categoryContainer">
		<view class="header">
<!-- 			<view class="search"></view> -->
			<input class="search"/>
		</view>
		
		<view class="main">
			
			<view class="left">
				<view @click="defaultIndex = index" class="leftItem" :class="{active:index === defaultIndex}" v-for="(category,index) in categoryList" :key="category.classifyId">
				{{category.classifyName}}
				</view>
			</view>
			
			<scroll-view enable-flex scroll-y="true" class="rightScroll">
				<view class="scrollItem">
					<image class="itemImg" :src="currentCategory.imgUrl1"></image>
					<view class="goodsList">
						<view class="goods" v-for="(txt,index) in goodsList" :key="txt.classifyId">
							<text class="goodsText" >{{txt.classifyName}}</text>
							<view class="theend">
								<view class="end" v-for="(end,index) in txt.third" :key="end.classifyId">
								<image 
									style="width: 160rpx; height: 160rpx;"
									class="endimg"  :src="end.image"></image>
								<p class="endtxt"
									style="font-size: 32rpx;">{{end.classifyName}}</p>
							</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				defaultIndex:0,
			};
		},
		mounted(){
			this.getCategoryList()
		},
		methods:{
			getCategoryList(){
				this.$store.dispatch('getCategoryList')
			}
		},
		computed:{
			...mapState({
				categoryList:state =>state.category.categoryList
			}),
			
			currentCategory(){
				return this.categoryList[this.defaultIndex] || {}
			},
			
			goodsList(){
				return this.currentCategory.second || []
			},
			
			last1(){
				return this.goodsList.third || []
			},
		}
	}
</script>

<style lang="stylus">
	.categoryContainer 
		height 100%
		.header
			height 80rpx
			display flex
			justify-content center
			align-items center
			.search
				width 90%
				height 60rpx
				background-color #e6e6e6
				font-size 28rpx
				line-height 60rpx
				border-radius 30rpx
				padding-left : 40rpx
		.main
			display flex
			border-top 1px solid #AAAAAA
			box-sizing border-box
			.left
				width 23%
				height 100rpx
				.leftItem
					width 150rpx
					font-size 28rpx
					text-align center
					line-height 80rpx
					&.active
						color : red
						font-weight : bold
						background-color :#F6EBEA
			.rightScroll
				height:calc(100vh - 80rpx)
				flex 1
				border 1px solid #c8c8c8
				box-sizing border-box
				.scrollItem
					.itemImg
						display block
						width 520rpx
						height 190rpx
						margin 20rpx 40rpx
						border-radius 30rpx
					.goodsList
						flex-wrap wrap
						.goods
							width 100%
							border 1rpx solid #f1f1f1
							.goodsText
								font-size 35rpx
								margin-left 40rpx
								flex-direction:column
							.theend
								display : flex
								margin-top : 30rpx
								margin-bottom : 30rpx
								.end
									margin-left :40rpx
									.endtxt
										text-align :center



</style>
